<template>
  <div>
    <van-swipe-cell :right-width="65" :on-close="onClose" id="a">
      <van-cell-group>
        <van-row>

            <!-- 是否到场组件 -->
          <van-col span="4" class="van-col-icon">
            <!-- 自定义是否到场图标 -->
            <ariveIcon :AbsentInfo="data"></ariveIcon>
          </van-col>

          <!-- 是否首发组件 -->
          <van-col span="4" class="van-col-Sf">
            <!-- 将player.vue 接受到的队伍信息发送给sf_icon -->
            <sfIcon :StartingInfo="data"></sfIcon>
          </van-col>

          <!-- 头像上传按钮 -->
          <van-col span="4">
            <van-uploader :after-read="onRead">
              <van-icon name="photograph" color="red" size="10vw" />
            </van-uploader>
          </van-col>

          <!-- 姓名 + 球员号码-->
          <van-col span="9">
            <van-row class="palyerInfo">
              <van-col span="16" class="playerName">
               <input type="text" v-model="data.msg.name" class="playerName_text">
              </van-col>
              <van-col span="8" class="palyerNum">
                <input type="text" v-model="data.msg.Number">
              </van-col>
            </van-row>
          </van-col>

          <!-- 滑动按钮 -->
          <van-col span="3">
            <van-icon name="arrow-left"/>
          </van-col>

        </van-row>
        <!-- <van-cell title="单元格" value="asdfasd" /> -->
      </van-cell-group>
        <span slot="right" class="delete" >删除</span>
    </van-swipe-cell>
  </div>
</template>

<script>
import ariveIcon from '@/components/Icon/arive_icon.vue'
import sfIcon from '@/components/Icon/sf_icon.vue'

export default {
  name: 'playerInfo',
  data () {
    return {
      data: {
        // 将vuex 中的队伍信息赋值给flag
        flag: this.$store.state.team1,
        msg: [
          {
            name: '',
            Number: ''
          }
        ]
      }

    }
  },

  components: {
    ariveIcon,
    sfIcon
  },
  methods: {
    onRead (file) {
      console.log(file)
    },
    onClose (clickPosition, instance) {
      switch (clickPosition) {
        case 'cell':
        case 'outside':
          instance.close()
          break
        case 'right':
          this.$dialog.confirm({
            message: '确定删除吗？'
          }).then(() => {
            const b = document.querySelector('#a')
            b.style.display = 'none'
            instance.close()
          })
          break
      }
    }
  }

}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
  font-size: 2vw;
  line-height: 10vw;
}
.van-swipe-cell, .van-cell{
    height: 10vw;
  }
.delete{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 130px;
  height: 100%;
  font-size: 15px;
  line-height: 80px;
  color: rgb(255, 255, 255);
  text-align: center;
  background-color: rgb(255, 0, 0);
}
.van-swipe-cell{
  /* background-color: antiquewhite; */
  margin-top:1vw ;
}
.van-cell-group{
  /* margin-top:1vw ; */
  height: 12vw;
  /* background-color: #f44; */
}
.van-col{
  text-align: center;
}
.palyerInfo{
  text-align: center;
  /* border: 1px dashed black; */
}
.playerName{
  box-sizing: border-box;
  /* background-color: aquamarine; */
}
.van-row{
  height: 10vw;
  background-color: rgb(255, 255, 255);
}
.palyerNum{
  height: 10vw;
  /* border: 1px dashed black; */
}
.van-col-icon,.van-col-Sf{
  position: relative;
}
.van-cell{
  padding: 0;
}
::v-deep input{
  width: 100%;
  height: 100%;
  font-size: 4vw;
  text-align: center;
  box-sizing: border-box;
  border: 2px dashed black;
  background-color: rgb(255, 255, 255);
}
.playerName_text{
  border: none;
  font-size: 4vw;
  border: 1px dashed black;
  width: 100%;
  height: 10vw;
}
</style>
